<template>
    <view class="container">
        <div v-for="(item, index) in arr">
            <view class="card">
                <view style="height: 10px;"></view>
                <view style="width: 90%;margin-left: 5%;">
                    <div>题目名称:{{ item.itemName }}</div>
                    <div style="height: 5rpx;"></div>
                    <div>当前题型:{{ item.itemType == 0 ? '单选' : item.itemType == 1 ? '多选' : item.itemType == 2 ? '判断' :
                        '填空' }}</div>
                    <div style="height: 5rpx;"></div>
                    <div v-if="item.itemType == 1">
                        <checkbox-group @change="(event) => changeSelection(event, index)">
                            <div v-if="item.optionOne != ''">
                                <checkbox :value="item.optionOne" :checked="false" /><span>选项一：{{ item.optionOne
                                    }}</span>
                            </div>
                            <div v-if="item.optionTwo != ''">
                                <checkbox :value="item.optionTwo" :checked="false" /><span>选项二：{{ item.optionTwo
                                    }}</span>
                            </div>
                            <div v-if="item.optionThree != ''">
                                <checkbox :value="item.optionThree" :checked="false" /><span>选项三：{{ item.optionThree
                                    }}</span>
                            </div>
                            <div v-if="item.optionFour != ''">
                                <checkbox :value="item.optionFour" :checked="false" /><span>选项四：{{ item.optionFour
                                    }}</span>
                            </div>
                            <div v-if="item.optionFive != ''">
                                <checkbox :value="item.optionFive" :checked="false" /><span>选项五：{{ item.optionFive
                                    }}</span>
                            </div>
                        </checkbox-group>
                    </div>
                    <!-- 填空 -->
                    <div v-if="item.itemType == 3">
                        <input placeholder="请输入答案" v-model="item.solution"
                        @change="changeInput(item.solution, index)"></input>   
                    </div>
                    <!-- 单选 -->
                    <div v-if="item.itemType === 0">
                        <u-radio-group v-model="item.radioValue" @change="(event) => changeRadio(item.radioValue, index)"
                            placement="column">
                            <u-radio v-if="item.optionOne != ''" :label="item.optionOne" :name="1"></u-radio>
                            <u-radio v-if="item.optionTwo != ''" :label="item.optionTwo" :name="2"></u-radio>
                            <u-radio v-if="item.optionThree != ''" :label="item.optionThree" :name="3"></u-radio>
                            <u-radio v-if="item.optionFour != ''" :label="item.optionFour" :name="4"></u-radio>
                            <u-radio v-if="item.optionFive != ''" :label="item.optionFive" :name="5"></u-radio>
                        </u-radio-group>
                    </div>
                    <!-- 判断 -->
                    <div v-if="item.itemType == 2">
                        <u-radio-group v-model="item.ifValue"  @change="(event) => changeIf(item.ifValue,index)"placement="column">
                            <u-radio v-if="item.optionOne != ''" :label="item.optionOne" :name="1"></u-radio>
                            <u-radio v-if="item.optionTwo != ''" :label="item.optionTwo" :name="2"></u-radio>
                            <u-radio v-if="item.optionThree != ''" :label="item.optionThree" :name="3"></u-radio>
                            <u-radio v-if="item.optionFour != ''" :label="item.optionFour" :name="4"></u-radio>
                            <u-radio v-if="item.optionFive != ''" :label="item.optionFive" :name="5"></u-radio>
                        </u-radio-group>
                    </div>
                </view>
                <view style="height: 10px;"></view>
            </view>
        </div>
        <div style="height: 10px;"></div>
        <div class="done" @click="doneStudy">完成考试</div>
        <div style="height: 3vh;"></div>
    </view>
</template>


<script>
import { exanDetail, donePaper } from '../api/api.js';
export default {
    data() {
        return {
            arr: [],
            maps: [{
                
            }],
            answer: '',//答案
            radioValue: '',//单选答案
            ifValue: '',//判断答案
            id: '',
            seaArr: []
        }
    },
    methods: {
        doneStudy() {
            console.log(this.maps);
            // console.log(this.arr,'arr');
            
            // return;
            const hasEmptyName = this.maps.some(item => item.solution === '');
            if (hasEmptyName) {
                uni.showToast({
                    title: '输入完整后提交',
                    icon: 'none'
                });
            } else {
                donePaper({
                    id: uni.getStorageSync('doneId'),
                    maps: this.maps
                }).then(res => {
                    console.log(res.data, '完成考试');
                    if (res.data.code == 200) {
                        uni.showToast({
                            title: res.data.msg,
                            icon: 'success'
                        })
                        setTimeout(() => {
                            uni.navigateBack({
                                delta: 1
                            });
                        }, 1000)
                    } else {
                        uni.showToast({
                            title: res.data.msg,
                            icon: 'none'
                        })
                    }
                })
            }

        },
        changeSelection(e, index) {
            console.log(index, 'index');
            console.log(e.detail.value, 'e');
            const value = e.detail.value;
            this.maps[index].solution = value.join();
        },
        changeRadio(i, index) {
            console.log(index, 'index');
            console.log(i, 'radioValue');
            if (i == 1) {
                this.maps[index].solution = this.seaArr[index].optionOne
            } else if (i == 2) {
                this.maps[index].solution = this.seaArr[index].optionTwo
            } else if (i == 3) {
                this.maps[index].solution = this.seaArr[index].optionThree
            } else if (i == 4) {
                this.maps[index].solution = this.seaArr[index].optionFour
            } else if (i == 5) {
                this.maps[index].solution = this.seaArr[index].optionFive
            }
        },
        changeIf(i,index) {
            console.log(i);
            if (i == 1) {
                this.maps[index].solution = this.seaArr[index].optionOne
            } else if (i == 2) {
                this.maps[index].solution = this.seaArr[index].optionTwo
            } else if (i == 3) {
                this.maps[index].solution = this.seaArr[index].optionThree
            } else if (i == 4) {
                this.maps[index].solution = this.seaArr[index].optionFour
            } else if (i == 5) {
                this.maps[index].solution = this.seaArr[index].optionFive
            }
        },
        changeInput(i, index) {
            console.log(i, 'i');
            console.log(index, 'index');
            this.maps[index].solution = i;

            // console.log(index, 'index', this.answer);
            // this.maps[index].solution = this.answer;
        }


    },
    onLoad(options) {
        exanDetail(options.id).then(res => {
            console.log(res, 'res');
            this.arr = res.data.data.map((item)=>{
                return{
                    ...item,
                     solution: ''
                }
            })
            console.log(this.arr,'arr');
            
            this.seaArr = res.data.data;
            let arrs = res.data.data;
            this.maps = arrs.map((item) => {
                return {
                    id: item.id,
                    solution: ''
                }
            })
            // console.log(this.maps,'maps');
        })
    },
    onShow() {

    }
}
</script>

<style lang="scss">
.cz {
    display: flex;
    justify-content: center;
    width: 49%;
}

.czs {
    padding: 8rpx 20rpx;
    background-color: #4a9b4f;
    color: #fff;
    border-radius: 8rpx;
}

.container {
    height: 100vh;
    width: 100vw;
    background: #ffffff;
    color: #000000;
    overflow-y: scroll;
}

.card {
    width: 95%;
    margin-left: 2.5%;
    margin-top: 10px;
    border-radius: 10px;
    background: #f1f1f1;
}

.table-th {
    width: 49%;
    text-align: center;
}

.table {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.done {
    width: 90%;
    margin-left: 5%;
    border-radius: 5px;
    background: #000000;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 40px;
}
</style>